<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>实现底部导航栏</title>
  <link rel="stylesheet" href="css/nav.css">
</head>

<body>

  <div id="app">
    <div class="content">
      <h1>主页内容</h1>
    </div>
    <navbar-list></navbar-list>
    <!-- <div class="bottom-navbar"> -->
      <!-- TODO 根据HTML结构分析，定义子组件结构 -->
      <!-- <div class="navbar-item"><img src="images/nav-icon-home.png" alt="首页"> <span>首页</span></div>
      <div class="navbar-item"><img src="images/nav-icon-category.png" alt="商品分类"> <span>商品分类</span></div>
      <div class="navbar-item"><img src="images/nav-icon-cart.png" alt="购物车"> <span>购物车</span></div>
      <div class="navbar-item"><img src="images/nav-icon-user.png" alt="个人中心"> <span>个人中心</span></div> -->
    </div>
  </div>

  <template id="bottom-navbar-template">
    <div class="bottom-navbar">
      <navbar-item v-for="navbar in navTabs"  :title="navbar.title" :icon="navbar.icon" />
    </div>
  </template>

  <template id="navbar-item-template">
    <div class="navbar-item">
      <img :src="icon" :alt="title">
      <span>{{ title }}</span>
    </div>
  </template>

  <!-- 引入 Vue.js -->
  <script src="js/vue.js"></script>
  <script>
    
        // TODO 参考子组件导航项数据如下
        // navTabs: [
        //   { title: '首页', icon: 'images/nav-icon-home.png' },
        //   { title: '商品分类', icon: 'images/nav-icon-category.png' },
        //   { title: '购物车', icon: 'images/nav-icon-cart.png'},
        //   { title: '个人中心', icon: 'images/nav-icon-user.png'}
        // ]

      
    // 创建子组件
    const navbarItem = {
      // 引用子组件模板
      template: '#navbar-item-template',
      // 声明子组件接收父组件传递的值
      props: ['title', 'icon']
    }
    // 创建父组件
    const navbarList = {
      // 引用父组件模板
      template: '#bottom-navbar-template',
      components: {
        // 注册子组件
        'navbar-item': navbarItem
      },
      data() {
        return {
          navTabs: [
          { title: '首页', icon: 'images/nav-icon-home.png' },
          { title: '商品分类', icon: 'images/nav-icon-category.png' },
          { title: '购物车', icon: 'images/nav-icon-cart.png'},
          { title: '个人中心', icon: 'images/nav-icon-user.png'}
        ]
        }
      }
    };
    // 创建 Vue 实例，并将父组件注册到 Vue 实例中
    const app = new Vue({
      el: '#app',
      components: {
        // 注册父组件
        'navbar-list': navbarList,
      }
    })
  </script>

</body>

</html>